<template>
  <div class="index" @scroll="scroll">
    <my-col-header class="fixed" v-show="show"></my-col-header>
    <div class="top-box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banners" :key="item.id">
          <img :src="item.picUrl" alt="banner">
        </van-swipe-item>
      </van-swipe>
      <user-set class="set-box"></user-set>
    </div>
    <div class="bargin good-item" @click="$router.push('/barginList')">
      <my-title>全民砍价</my-title>
      <my-card :item="kjItem"></my-card>
    </div>
    <div class="bargin good-item">
      <my-title @click="$router.push('/yxSym')">精选专题</my-title>
      <my-news :news="news"></my-news>
    </div>
    <div class="bargin good-item">
      <my-title @click="$router.push('/recoment')">人气推荐</my-title>
      <ul class="goods-box">
        <my-rec class="good-item" @click="$router.push('/goodDetail/' + item.id)" v-for="(item, i) in goods" v-show="i > 8 && i <= 12" :key="item.id" :good="item"></my-rec>
      </ul>
    </div>
 </div>
</template>

<script>
import { getBanners, getKjList, getNews, getGoods } from '@/api/home'
import { ref } from 'vue'
import userSet from '@/components/userSet/userSet'
import myTitle from '@/components/myTitle/myTitle'
import myCard from '@/components/myCard/myCard'
import myNews from '@/components/myNews/myNews'
import myRec from '@/components/myRec/myRec'
import myColHeader from '@/components/myColHeader/myColHeader'
export default {
  name: 'index',
  components: {
    userSet,
    myTitle,
    myCard,
    myNews,
    myRec,
    myColHeader
  },
  data() { 
    return {
      banners: [],
      kjItem: {},
      news: [],
      goods: []
    }
  },
  created() {
    // 请求头部轮播图数据的接口
    getBanners().then(res => {
      this.banners = res.data
    })

    // 请求砍价列表的数据
    getKjList().then(res => {
      // console.log(res);
      this.kjItem = res.data.goodsMap['99764']
    })

    // 请求精选专题数据
    getNews().then(res => {
      // console.log(res);
      this.news = res.data
    })

    // 请求人气推荐列表数据
    getGoods().then(res => {
      this.goods = res.data
    })
  },
  setup() {
    let show = ref(false)
    function scroll(e) {
      show.value = e.target.scrollTop > 400 ? true : false
    }
    return {
      show,
      scroll
    }
  }
 }
</script>

<style scoped lang="scss">
img {
  width: 100%;
  height: auto;
}
.top-box {
  position: relative;
  background-color: #fff;
  .set-box {
    position: absolute;
    bottom: 0;
  }
}
.bargin.good-item {
  margin-top: 30px;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
</style>